<template>
  <div>
    姓名:<input v-model="user.name" type="text">
    密码:<input v-model="user.age" type="text">
  </div>
</template>

<script>
export default {
  data() {
    return {
      user:{
        name:'',
        age:''
      }
    };
  },
  //侦听器默认情况无法监听引用类型
  //如果需要监听引用类型的属性变化，就需要使用深度监听
  //如果需要页面刚加载就执行一次，可以使用立即执行配置
  //完整写法:
  //要监听的属性名:{deep:true, handler() {}}
  watch:{
    user:{
      // immediate:true,//页面加载是立即执行一次
      deep:true,//深度监听 
      handler(newVal,oldVal) {
        //监听引用数据类型时，newVal 和oldVal是一样的
        // ，oldVal 失效了
        //不影响开发，开发时绝大部分情况下都使用新的值
        //官方bug，在Vue 3 中恢复了
        console.log(newVal,oldVal);
      }
    }
  }
}
</script>

<style>

</style>